<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>用户注册</p>
        </header>

        <ul class="user-info">
            <li>
                <p class="title">用户名：</p>
                <input v-model="user.userName" id="username" class="lineedit" placeholder="请输入用户名">
            </li>
            <li>
                <p class="title">手机号</p>
                <input v-model="user.userId" class="lineedit" placeholder="请输入手机号">
            </li>
            <li>
                <p class="title">密码：</p>
                <input v-model="user.password" class="lineedit" placeholder="请输入密码">
            </li>
            <li>
                <p class="title">确认密码：</p>
                <input v-model="confirmPassword" class="lineedit" placeholder="请确认密码">
            </li>
            <li>
                <p class="title">性别：</p>
                <div class="check-box1">
                    <p>男</p><input v-model="sex" type="radio" id="sex" name="r">
                    <p>女</p><input v-model="sex" type="radio" id="sex" name="r">
                </div>
            </li>
        </ul>

        <div class="check-box2">
            <input type="checkbox" id="check-box" value="none">
            <p>我已充分阅读并理解</p>
            <a href="">《额乐嘛剥削用户条约》</a>
        </div>

        <ul class="log-reg" @click="register">
            <li>
                <button>
                    注册
                </button>
            </li>
        </ul>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer.vue';
export default {
    name: 'Login',
    data() {
        return {
            user:{
                userId:'',
                password:'',
                userName:'',
                userSex:1
            },
            confirmPassword:''
        }
    },
    methods: {
        checkUserId() {
            this.$axios.post('UserController/getUserById', this.$qs.stringify({
                userId: this.user.userId,
            })).then(response => {
                if (response.data == 1) {
                    this.user.userId = '';
                    alert('此手机号码已存在！')
                }
            }).catch(error => {
                console.error(error);
            });
        },
        register() {
            if (this.user.userId == '') {
                alert('手机号码不能为空！');
                return;
            }
            if (this.user.password == '') {
                alert('密码不能为空！');
                return;
            }
            if (this.user.password != this.confirmPassword) {
                alert('两次输入的密码不一致！');
                return;
            }
            if(this.user.sex=='')
            {
                alert('性别不能为空');
                return;
            }
            if (this.user.userName == '') {
                alert('用户名不能为空！');
                return;
            }

            //注册请求
            this.$axios.post('UserController/saveUser', this.$qs.stringify(
                this.user
            )).then(response => {
                if (response.data > 0) {
                    alert('注册成功！');
                    this.$router.go(-1);
                } else {
                    alert('注册失败！');
                }
            }).catch(error => {
                console.error(error);
            });
        }
    },
    components: {
        Footer
    }
}
</script>

<style>
.wrapper {
    width: 100%;
    height: 100%;
}

.wrapper header {
    width: 100%;
    height: 13vw;
    background-color: #51b9fe;
    justify-content: center;
    display: flex;
    align-items: center;

    font-size: 4.5vw;
    color: #fff;
}

.wrapper .user-info {
    width: 100%;
    height: 33vw;
    justify-content: center;
    margin-top: 5vw;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.wrapper .user-info li {
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
    display: flex;
    margin-left: 3vw;
    font-size: 3vw;
    align-items: center;
}

.wrapper .user-info li .check-box1 {
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.wrapper .check-box2{
    margin-top: 6vw;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.wrapper .user-info li .title {
    flex: 0 0 18vw;
    font-size: 3vw;
}

.wrapper .user-info li .lineedit {
    border: 0px;
    border-bottom: solid 1px rgb(114, 86, 86);
    font-size: 3vw;
}

.wrapper .check-box {
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-left: 3vw;
    font-size: 3vw;
}

.wrapper .check-box input {
    width: 3vw;
    height: 3vw;
    margin-right: 3vw;
}

.wrapper .log-reg {
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.wrapper .log-reg li {
    margin-top: 6vw;
}

.wrapper .log-reg li button {
    width: 70vw;
    height: 8vw;
    border-radius: 3vw;
    border: none;
    font-size: 3vw;
}
</style>